<template>
	<view class="filter">
		<view class="filter-search">
			<view class="searchPart" @tap="goSearch">
				<view class="input" :class="searchTxt == '请输入咨询师姓名' ? '' : 'hasKeyWord'">{{ searchTxt }}</view>
				<button class="comBtn" v-if="searchTxt == '请输入咨询师姓名'">搜索</button>
				<view class="iconfont icon-qingkong" v-else @tap.stop="delSearchTxt"></view>
			</view>
		</view>
		<view class="filterCon hasFlex">
			<picker class="filter-item" @change="bindFieldsFilter" :value="fieldsIndex" :range="fieldsArr" range-key="lyName">
				<text class="filterTxt">{{fieldsArr[fieldsIndex].lyName}}</text>
				<text class="iconfont icon-xiala"></text>
			</picker>
			<picker class="filter-item" @change="bindSexFilter" :value="sexIndex" :range="sexArr" range-key="name">
				<text class="filterTxt">{{sexArr[sexIndex].name}}</text>
				<text class="iconfont icon-xiala"></text>
			</picker>
			<picker class="filter-item" @change="bindFwsLevelFilter" :value="fwsLevelIndex" :range="fwsLevelArr" range-key="name">
				<text class="filterTxt">{{fwsLevelArr[fwsLevelIndex].name}}</text>
				<text class="iconfont icon-xiala"></text>
			</picker>
			<view class="filter-items spec" @tap="goFilter">
				<view class="iconfont icon-shaixuan"></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			searchTxt:String,
			fieldsArr:Array,
			fieldsIndex:Number,
			sexArr:Array,
			sexIndex:Number,
			fwsLevelArr:Array,
			fwsLevelIndex:Number
		},
		data(){
			return{
				needRestFlag:true,
				isHasSelFlag : true,
				specFlag : false,
			}
		},
		methods:{
			goSearch(){
				this.$emit('goSearch');
			},
			delSearchTxt(){
				this.$emit('delSearchTxt');
			},
			bindFieldsFilter(e){
				this.$emit('bindFieldsFilter',e.target.value);
			},
			bindSexFilter(e){
				this.$emit('bindSexFilter',e.target.value);
			},
			bindFwsLevelFilter(e){
				this.$emit('bindFwsLevelFilter',e.target.value);
			},
			goFilter(){
				this.$emit('goFilter')
			},
			//重置
			resetDistrict(){
				this.$emit('resetDistrict');
			},
			selectCity(e){
				this.isHasSelFlag = e.isHasSelFlag;
				this.$emit('selectCity',e);
			},
			toggleAreaPicker(e){
				this.$emit('toggleAreaPicker',e);
			},
			goAuthLoc(){
				this.$emit('goAuthLoc')
			},
			selLocArea(){
				this.$emit('selLocArea');
			}
		}
	}
</script>

<style lang="scss" scoped>
	.filter{
		width: 100%;
		position: sticky;
		top: 0;
		background: #fff;
		box-shadow: 0 4rpx 10rpx rgba(127, 188, 255, .1);
		--parHei:80rpx;
		.filter-search{
			--height:66rpx;
			height:var(--parHei);
			margin: 0 30rpx;
			display: flex;
			justify-content: space-between;
			.searchPart{
				flex: 1;
				background: rgba(127, 188, 255, .1);
				border-radius: 50rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.input{
					flex: 1;
					height: var(--height);
					line-height: var(--height);
					padding: 0 30rpx;
					font-size: 28rpx;
					color: $pss-text-color8;
					&.hasKeyWord{
						font-size: 30rpx;
						color: $pss-text-color0;
						font-weight: 600;
					}
				}
				.comBtn{
					width: 140rpx;
					line-height: var(--height);
					height: var(--height);
					background: $pss-color-blue-light;
					margin: 0 10rpx;
					border-radius: 50rpx;
					font-size: 28rpx;
				}
				.icon-qingkong{
					margin-right: 30rpx;
					color: $pss-text-color8;
					font-size: 30rpx;
					height: 100%;
					line-height: var(--parHei);
					padding-left: 50rpx;
				}
			}
		}
		.filterCon{
			height: var(--parHei);
			margin-top: 10rpx;
			.filter-item{
				flex: 1;
				display: flex;
				height: 100%;
				justify-content: center;
				align-items: center;
				color: $pss-text-color0;
				font-size: 28rpx;
				.icon-xiala{
					font-size: 24rpx;
					margin-left: 10rpx;
				}
			}
			.filter-items{
				width: 100rpx;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				.icon-shaixuan{
					font-size: 36rpx;
					color: $pss-text-color8;
				}
			}
		}
	}
</style>